<!--25-dom查询方法汇总.html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>dom查询方法汇总</title>
    <link rel="stylesheet" type="text/css" href="css.css"/>
    <script type="text/javascript">
        window.onload = function () {
            //1.查找#bj节点
            var elem = document.getElementById("btn01");
            elem.onclick = function () {
                alert(document.getElementById("bj").innerHTML);
            }

            //2.查找所有li节点
            var btn02Ele = document.getElementById("btn02");
            btn02Ele.onclick = function () {
                var elementsByTagName = document.getElementsByTagName("li");
                alert(elementsByTagName.length);
                for (let i = 0; i < elementsByTagName.length; i++) {
                    alert("element[" + i + "]" + elementsByTagName[i].innerHTML);
                }
            };
            //3.查找name=gender的所有节点
            var btn03Ele = document.getElementById("btn03");
            btn03Ele.onclick = function () {
                var eles = document.getElementsByName("gender");
                alert(eles.length);
            };
            //4.查找#city下所有li节点
            var btn04Ele = document.getElementById("btn04");
            btn04Ele.onclick = function () {
                var lis = document.getElementById("city").getElementsByTagName("li");
                alert(lis.length);
            };
            //5.返回#city的所有子节点，包含了空格。
            var btn05Ele = document.getElementById("btn05");
            btn05Ele.onclick = function () {
				var childNodes = document.getElementById("city").childNodes;
				alert(childNodes.length);
				for (var i = 0; i < childNodes.length; i++) {
					alert(childNodes[i].nodeName);
				}
            };
            //6.返回#phone 的第一个子节点
            var btn06Ele = document.getElementById("btn06");
            btn06Ele.onclick = function () {
            	var firstChild = document.getElementById("phone").firstChild;
            	alert(firstChild.innerHTML);
            };
            //7.返回#bj的父节点
            var btn07Ele = document.getElementById("btn07");
            btn07Ele.onclick = function () {
            	var parentNode = document.getElementById("bj").parentNode;
            	alert(parentNode.innerHTML);
            };
            //8.返回#android的前一个兄弟节点
            var btn08Ele = document.getElementById("btn08");
            btn08Ele.onclick = function () {
				var previousSibling = document.getElementById("android").previousSibling;
				alert(previousSibling.innerHTML);
            };
            //9.读取#username 的 value 属性值
            var btn09Ele = document.getElementById("btn09");
            btn09Ele.onclick = function () {
				var val = document.getElementById("username").value;
				alert(val);
            };
            //10.设置#username的value属性值
            var btn10Ele = document.getElementById("btn10");
            btn10Ele.onclick = function () {
				document.getElementById("username").value = "ylaihui.com";
            };
            //11.返回#bj的文本值
            var btn11Ele = document.getElementById("btn11");
            btn11Ele.onclick = function () {
				var textval = document.getElementById("bj").innerText;
				alert(textval);
            };
        };
    </script>
</head>
<body>
<div id="total">
    <div class="inner">
        <p>
            你喜欢哪个城市?
        </p>

        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

        <br>
        <br>

        <p>
            你喜欢哪款单机游戏?
        </p>

        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>

        <br/>
        <br/>

        <p>
            你手机的操作系统是?
        </p>

        <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
    </div>

    <div class="inner">
        gender:
        <input type="radio" name="gender" value="male"/>
        Male
        <input type="radio" name="gender" value="female"/>
        Female
        <br>
        <br>
        name:
        <input type="text" name="name" id="username" value="ylaihui"/>
    </div>
</div>
<div id="btnList">
    <div>
        <button id="btn01">查找#bj节点</button>
    </div>
    <div>
        <button id="btn02">查找所有li节点</button>
    </div>
    <div>
        <button id="btn03">查找name=gender的所有节点</button>
    </div>
    <div>
        <button id="btn04">查找#city下所有li节点</button>
    </div>
    <div>
        <button id="btn05">返回#city的所有子节点</button>
    </div>
    <div>
        <button id="btn06">返回#phone的第一个子节点</button>
    </div>
    <div>
        <button id="btn07">返回#bj的父节点</button>
    </div>
    <div>
        <button id="btn08">返回#android的前一个兄弟节点</button>
    </div>
    <div>
        <button id="btn09">返回#username的value属性值</button>
    </div>
    <div>
        <button id="btn10">设置#username的value属性值</button>
    </div>
    <div>
        <button id="btn11">返回#bj的文本值</button>
    </div>
</div>
</body>
</html>